import { ElDatePicker, ElInput, ElInputNumber, ElOption, ElSelect, ElSwitch, ElTimePicker } from 'element-plus'
import type { Component } from 'vue'
import DutySelect from './DutySelect/index.vue'
import FaceManage from './FaceManage/index.vue'
import Map from './Map/index.vue'
import MyAmountInput from './MyAmountInput/index.vue'
import MyFileUpload from './MyFileUpload/index.vue'
import MyImgPreview from './MyImgPreview/index.vue'
import MyPdfUpload from './MyPdfUpload/index.vue'
import Operation from './Operation/index.vue'
import QuillEditor from './quill/QuillEditor.vue'
import QuillViewer from './quill/QuillViewer.vue'
import RouterLink from './RouterLink/index.vue'
import Tags from './Tags/index.vue'
import TreeQvil from './TreeQvil/index.vue'
import TreeSelect from './TreeSelect/index.vue'
// 基础组件映射
const ElSelectWithOptions = {
  components: { ElSelect, ElOption },
  props: ['modelValue', 'options', 'multiple', 'placeholder'],
  emits: ['update:modelValue', 'visible-change'],
  template: `
    <el-select :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" :multiple="multiple" :placeholder="placeholder" @visible-change="$emit('visible-change', $event)">
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      />
    </el-select>
  `,
} as Component

// 组件类型定义
export type ComponentType =
  | 'input'
  | 'input-number'
  | 'select'
  | 'switch'
  | 'textarea'
  | 'date-picker'
  | 'time-picker'
  | 'img-upload'
  | 'TreeSelect'
  | 'TreeQvil'
  | 'DutySelect'
  | 'MyAmountInput'
  | 'MyFileUpload'
  | 'MyImgPreview'
  | 'MyPdfUpload'
  | 'router-link'
  | 'quill-editor'
  | 'quill-viewer'
  | 'Operation'
  | 'FaceManage'
  | 'Tags'
  | 'Map'

// 组件映射表
export const componentMap: Record<ComponentType, Component> = {
  input: ElInput,
  'input-number': ElInputNumber,
  select: ElSelectWithOptions,
  switch: ElSwitch,
  textarea: ElInput,
  'date-picker': ElDatePicker,
  'time-picker': ElTimePicker,
  'img-upload': MyFileUpload,
  TreeSelect,
  TreeQvil,
  DutySelect,
  MyAmountInput,
  MyFileUpload,
  MyImgPreview,
  MyPdfUpload,
  'router-link': RouterLink,
  'quill-editor': QuillEditor,
  'quill-viewer': QuillViewer,
  Operation,
  FaceManage,
  Tags,
  Map,
}

// 获取组件的辅助函数
export const getComponent = (type: ComponentType): Component => {
  return componentMap[type] || ElInput
}

// 获取组件类型的辅助函数
export const getComponentType = (type: ComponentType): string | undefined => {
  if (type === 'textarea') {
    return 'textarea'
  } else if (type === 'date-picker') {
    return 'datetime'
  }
  return undefined
}

export const basicComponents = {
  // ... existing components ...
  QuillEditor,
  QuillViewer,
  Operation,
}
